<template>
  <div class="space-y-2">
    <button
      v-for="item in menuItems"
      :key="item.key"
      @click="$emit('tab-change', item.key)"
      class="w-full h-12 px-4 rounded-lg text-left transition-colors flex items-center gap-3"
      :class="activeTab === item.key 
        ? 'bg-[#635BFF] text-white' 
        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
    >
      <!-- 对话历史图标 -->
      <svg v-if="item.key === 'history'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <!-- 收藏图标 -->
      <svg v-else-if="item.key === 'favorites'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
      </svg>
      <!-- 自定义角色图标 -->
      <svg v-else-if="item.key === 'custom-roles'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
      </svg>
      <span>{{ item.label }}</span>
    </button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

defineProps<{
  activeTab: string
}>()

defineEmits<{
  'tab-change': [tab: string]
}>()

// 菜单项配置
const menuItems = computed(() => [
  {
    key: 'history',
    label: '对话历史'
  },
  {
    key: 'favorites', 
    label: '我的收藏'
  },
  {
    key: 'custom-roles',
    label: '自定义角色'
  }
])
</script>
